<template>
	<div class="node-wrap">
		<div class="node-wrap-box start-node" @click="show" style="margin-top: 10px">
			<div style="position: absolute;top :-28px;color: rgba(25, 31, 37, 0.4);">
				流程开始
			</div>
			<div class="content" style="color: rgb(130, 140, 165);">
				<em class="item-index">{{nodeConfig.index}}</em>
				<div v-if="true" class="flex" style="padding: 5px;padding-right: 25px;">
					<div class="flex ai-center jc-center">
						<div class="item-icon">
							<img style="border-radius: 6px;"
								src="https://lf3-static.bytednsdoc.com/obj/eden-cn/dvsmryvd_avi_dvsm/ljhwZthlaukjlkulzlp/icon/icon-Start-v2.jpg">
						</div>
					</div>
					<div>
						<div class="high-light">开始</div>
						<div> 工作流开始执行 <span class="high-light">&nbsp;</span></div>
					</div>
				</div>

				<div v-else class="flex" style="padding: 5px;padding-right: 25px;">
					<div class="item-icon flex ai-center jc-center">
						<div class="default-icon flex ai-center jc-center">
							<span role="img" class="anticon tx-ant-icon" style="transform: rotate(0deg);">
								<el-icon><el-icon-menu /></el-icon>
							</span>
						</div>
					</div>
					<div class="flex ai-center jc-center">
						<div>请 <span class="high-light">选择一个应用</span> 和 <span class="high-light">要执行的操作</span> </div>
					</div>
				</div>
				<!-- <span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
        <span v-else class="placeholder">请选择人员</span> -->
			</div>
		</div>
		<add-node v-model="nodeConfig.childNode"></add-node>
		<el-drawer v-model="drawer" destroy-on-close append-to-body :size="500">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label>{{form.name}}</label>
				</div>
			</template>
			<el-container>
				<el-main style="padding:0 20px 20px 20px">

					<el-tabs tab-position="top">
						<el-tab-pane label="触发应用" style="padding: 0px;">

						</el-tab-pane>
						<el-tab-pane label="触发条件">

						</el-tab-pane>
						<el-tab-pane label="配置参数" lazy>


						</el-tab-pane>
					</el-tabs>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="drawer=false">取消</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script>
	import addNode from './addNode'

	export default {
		inject: ['select'],
		props: {
			modelValue: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			addNode
		},
		data() {
			return {
				nodeConfig: {

				},
				drawer: false,
				isEditTitle: false,
				form: {}
			}
		},
		watch: {
			modelValue() {
				this.nodeConfig = this.modelValue
			}
		},
		mounted() {
			this.nodeConfig = this.modelValue
		},
		methods: {
			safeStringify(obj, indent = 2) {
				let cache = [];
				const retVal = JSON.stringify(
					obj,
					(key, value) =>
					typeof value === "object" && value !== null ?
					cache.includes(value) ?
					undefined // 如果在对象中找到循环引用就返回undefined，以避免错误
					:
					cache.push(value) && value // 否则将值添加到缓存中
					:
					value,
					indent
				);
				cache = null; // 释放缓存
				return retVal;
			},
			show() {
				this.form = {}
				this.form = JSON.parse(this.safeStringify(this.nodeConfig))
				this.drawer = true
			},
			editTitle() {
				this.isEditTitle = true
				this.$nextTick(() => {
					this.$refs.nodeTitle.focus()
				})
			},
			saveTitle() {
				this.isEditTitle = false
			},
			save() {
				this.$emit("update:modelValue", this.form)
				this.drawer = false
			},
			delNode() {
				this.$emit("update:modelValue", this.nodeConfig.childNode)
			},
			delUser(index) {
				this.form.nodeUserList.splice(index, 1)
			},
			selectHandle(type, data) {
				this.select(type, data)
			},
			toText(nodeConfig) {
				if (nodeConfig.nodeData && nodeConfig.nodeData.app) {
					const users = nodeConfig.nodeData.app.name;
					return users
				} else {
					return "请选择触发器";
				}
			}
		}
	}
</script>

<style scoped>

</style>
